<template>
  <div>
    <el-container>
      <el-main>
        <el-row>
          <el-col :span="15">
            <el-button type="primary" @click="newselectlession">新增选课</el-button>
            <el-button type="primary" @click="toback">返回</el-button>
            <template v-if="multipleSelection.length !== 0">
              <el-button type="primary" @click="group_num_dialog = true">分组</el-button>
            </template>
          </el-col>
          <el-col :span="3">
            <el-select v-model="search_type" placeholder="搜索字段">
              <el-option label="ID" value="0"></el-option>
              <el-option label="用户" value="1"></el-option>
              <!--<el-option label="课程" value="2"></el-option>-->
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-input placeholder="请输入内容" v-model="searchselectlession" class="input-with-select" @input ="slessionchange">
              <el-button @click="mysearch" slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </el-col>
        </el-row>
        <br>
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
          :default-sort = "{prop: 'group_num', order: 'ascending'}">
          <el-table-column
            type="selection"
            width="40">
          </el-table-column>
          <!--<el-table-column type="index"></el-table-column>-->
          <el-table-column prop="id" label="ID" width="100"></el-table-column>
          <el-table-column prop="course" label="课程">
          <template scope="scope">
          <p>{{scope.row.course.id}}/{{scope.row.course.name}}</p>
          </template>
          </el-table-column>
          <el-table-column prop="user.realname" label="用户">
          <template scope="scope">
          <p>{{scope.row.user.id}}/{{scope.row.user.realname}}/{{scope.row.user.nickname}}/{{scope.row.user.phone}}/{{scope.row.user.email}}</p>
          </template>
          </el-table-column>
          <el-table-column prop="group_num" label="分组" sortable>
            <template scope="scope">
              <template v-if="scope.row.group_num !== '' && scope.row.group_num !== null">
                <p>{{scope.row.group_num}}</p>
              </template>
              <template v-else>
                <p>暂未分组</p>
              </template>
            </template>
          </el-table-column>
          <!--<el-table-column prop="course.name" label="课程">-->
            <!--<template scope="scope">-->
              <!--<p>{{scope.row.course.id}}/<b>{{scope.row.course.name}}</b>/{{scope.row.course.subject.name}}</p>-->
            <!--</template>-->
          <!--</el-table-column>-->
          <!--<el-table-column prop="course.select_count" label="选课人数">-->
            <!--&lt;!&ndash;<template scope="scope">&ndash;&gt;-->
            <!--&lt;!&ndash;<p>{{scope.row.course.id}}/<b>{{scope.row.course.name}}</b>/{{scope.row.course.subject.name}}</p>&ndash;&gt;-->
            <!--&lt;!&ndash;</template>&ndash;&gt;-->
          <!--</el-table-column>-->
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <!--<el-button @click="editorselectlession(scope.row)" type="text" size="small">编辑</el-button>-->
              
              <template v-if="roles === 'superadmin' ">
                <el-button @click="deleteselectlession(scope.row)" type="text" size="small">删除</el-button>
              </template>
              <template v-else>
                <el-button @click="deleteselectlession(scope.row)" type="text" size="small" disabled>删除</el-button>
              </template>
            </template>
          </el-table-column>
        </el-table>

        <br>
        <el-row>
          <el-col :span="8"><p></p></el-col>
          <el-col :span="8">
            <el-pagination
              @current-change="currentChange"
              @size-change="sizeChange"
              background
              :page-sizes="[20, 40, 60, 100]"
              layout="sizes, prev, pager, next"
              :total="total"
              :page-size="page_size"
              :current-page="current_page"
            >
            </el-pagination>
          </el-col>
          <el-col :span="8"><p></p></el-col>
        </el-row>

        <el-dialog title="编辑选课信息" :visible.sync="dialogFormVisible" @close="dialogcolse" width="60%" center>
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" :label-position="labelPosition">
            <el-form-item label="选择用户" prop="user">
              <el-select v-model="ruleForm.user" placeholder="请选择" style="width: 100%;" multiple>
                <el-input placeholder="搜索用户" v-model="searchuser" class="input-with-select" @input ="userchange">
                  <el-button @click="searchusermethod" slot="append" icon="el-icon-search"></el-button>
                </el-input>
                <el-option
                  v-for="item in ruleForm.users"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="课程">
              <el-input v-model="ruleForm.course" :disabled="true"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="resetForm('ruleForm')">取 消</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
          </div>
        </el-dialog>

        <el-dialog
          title="提示"
          :visible.sync="group_num_dialog"
          width="80%"
          center>
          <div class="group_div">
            <p>中国分组</p>
            <el-radio-group v-model="group_radio">
              <el-radio :label="1" class="group_item">分组01</el-radio>
              <el-radio :label="2" class="group_item">分组02</el-radio>
              <el-radio :label="3" class="group_item">分组03</el-radio>
              <el-radio :label="4" class="group_item">分组04</el-radio>
              <el-radio :label="5" class="group_item">分组05</el-radio>
              <el-radio :label="6" class="group_item">分组06</el-radio>
              <el-radio :label="7" class="group_item">分组07</el-radio>
              <el-radio :label="8" class="group_item">分组08</el-radio>
              <el-radio :label="9" class="group_item">分组09</el-radio>
              <el-radio :label="10" class="group_item">分组10</el-radio>
              <el-radio :label="11" class="group_item">分组11</el-radio>
              <el-radio :label="12" class="group_item">分组12</el-radio>
              <!-- <el-radio :label="13" class="group_item">分组13</el-radio>
              <el-radio :label="14" class="group_item">分组14</el-radio>
              <el-radio :label="15" class="group_item">分组15</el-radio> -->
            </el-radio-group>
            <p>国外分组</p>
            <el-radio-group v-model="group_radio">
              <el-radio :label="21" class="group_item">分组21</el-radio>
              <el-radio :label="22" class="group_item">分组22</el-radio>
              <el-radio :label="23" class="group_item">分组23</el-radio>
              <el-radio :label="24" class="group_item">分组24</el-radio>
              <el-radio :label="25" class="group_item">分组25</el-radio>
              <el-radio :label="26" class="group_item">分组26</el-radio>
              <el-radio :label="27" class="group_item">分组27</el-radio>
              <el-radio :label="28" class="group_item">分组28</el-radio>
              <el-radio :label="29" class="group_item">分组29</el-radio>
              <el-radio :label="30" class="group_item">分组30</el-radio>
              <el-radio :label="31" class="group_item">分组31</el-radio>
              <el-radio :label="32" class="group_item">分组32</el-radio>
              <!-- <el-radio :label="13" class="group_item">分组33</el-radio>
              <el-radio :label="14" class="group_item">分组34</el-radio>
              <el-radio :label="15" class="group_item">分组35</el-radio> -->
            </el-radio-group>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="group_num_dialog = false">取 消</el-button>
            <el-button type="primary" @click="add_group_num()">确 定</el-button>
          </span>
        </el-dialog>

      </el-main>
      <el-footer></el-footer>
    </el-container>
  </div>
</template>

<script>
  import store from '../../store'
  import { getselectleeion, postselectleeion, patchselectleeion, deleteselectleeion, getcourse, getuser, patchcourseusergroup } from '@/api/course'
  export default {
    name: "coursestudents",
    data() {
      return {
        roles: store.getters.roles[0],
        tableData: [],
        course: {},
        father_page_num: 0,
        dialogFormVisible: false,
        labelPosition: 'left',
        use: 0,
        ruleForm: {
          id: 0,
          users: [],
          user: '',
          course: ''
        },
        rules: {
          user: [
            { required: true, message: '请选择用户', trigger: 'blur' }
          ]
        },
        searchselectlession: '',
        page_size: 20,
        total: 0,
        current_page: 1,
        searchuser: '',
        search_type: '0',
        multipleSelection: [],
        group_num_dialog: false,
        group_radio: 1
      }
    },
    methods: {
      patchcourseusergroupinfo(data,group_num) {
        patchcourseusergroup(data,group_num).then(response => {
          const data = response.data
          this.$message({
            type: 'success',
            message: '分组成功!'
          })
          this.getselectleeioninfo(this.current_page, '', this.page_size, '', this.course.id)
          this.group_num_dialog = false
        }).catch(error => {
          console.log(error)
        })
      },
      getselectleeioninfo(page, keyword, page_size, search_type, course_id) {
        getselectleeion(page, keyword, page_size, search_type, course_id).then(response => {
          const data = response.data
          this.tableData = data
          this.total = response.data_count
        }).catch(error => {
          console.log(error)
        })
      },
      getuserinfo(page, keyword, page_size) {
        getuser(page, keyword, page_size).then(response => {
          const data = response.data
          if (data.length === 0) {
            var nal_data_list = []
            var nal_data = {}
            nal_data.value = 0
            nal_data.label = '没有搜索到数据！'
            nal_data_list.push(nal_data)
            this.ruleForm.users = nal_data_list
          } else {
            var new_data_list = []
            for (var key in data) {
              var new_data = {}
              new_data.value = data[key].id
              new_data.label = data[key].id + '/' + data[key].realname + '/' + data[key].nickname + '/' + data[key].phone + '/' + data[key].email
              new_data_list.push(new_data)
            }
            this.ruleForm.users = new_data_list
          }
        }).catch(error => {
          console.log(error)
        })
      },
      deleteselectlession(row) {
        this.$confirm('是否确认删除该选课, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          var id = row.id
          deleteselectleeion(id).then(response => {
            const data = response.data
            console.log(data)
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            var data_len = this.tableData.length
            var is_jump = false
            if (data_len === 1) {
              is_jump = true
            } else {
              is_jump = false
            }
            if (this.current_page === 1) {
              this.getselectleeioninfo(this.current_page, '', this.page_size, '', this.course.id)
            } else {
              if (is_jump) {
                this.getselectleeioninfo(this.current_page - 1, '', this.page_size, '', this.course.id)
              } else {
                this.getselectleeioninfo(this.current_page, '', this.page_size, '', this.course.id)
              }
            }
            // this.getselectleeioninfo(this.current_page, '', this.page_size)
          }).catch(error => {
            console.log(error)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      // getcourseinfo(page, keyword, page_size) {
      //   getcourse(page, keyword, page_size).then(response => {
      //     const data = response.data
      //     if (data.length === 0) {
      //       var nal_data_list = []
      //       var nal_data = {}
      //       nal_data.value = 0
      //       nal_data.label = '没有搜索到数据！'
      //       nal_data_list.push(nal_data)
      //       this.ruleForm.courses = nal_data_list
      //     } else {
      //       var new_data_list = []
      //       for (var key in data) {
      //         var new_data = {}
      //         new_data.value = data[key].id
      //         new_data.label = data[key].id + '/' + data[key].name + '/' + data[key].subject.name + '/' + data[key].teacher.name
      //         new_data_list.push(new_data)
      //       }
      //       this.ruleForm.courses = new_data_list
      //     }
      //   }).catch(error => {
      //     console.log(error)
      //   })
      // },
      clearFormdata() {
        this.ruleForm = {
          id: 0,
          users: [],
          user: '',
          course: ''
        }
      },
      toback() {
        var pagenum = this.father_page_num
        this.$router.push({ name: 'selectlessionmanager', params: { pagenum: pagenum }})
      },
      mysearch() {
        this.current_page = 1
        this.getselectleeioninfo(this.current_page, this.searchselectlession, this.page_size, this.search_type, this.course.id)
      },
      slessionchange() {
        this.current_page = 1
        this.getselectleeioninfo(this.current_page, this.searchselectlession, this.page_size, this.search_type, this.course.id)
      },
      dialogcolse() {
        // 对话框关闭的回调
        console.log('ok')
        // this.$refs['ruleForm'].resetFields()
        this.clearFormdata()
      },
      searchusermethod() {
        this.getuserinfo(1, this.searchuser, 20)
      },
      userchange() {
        this.getuserinfo(1, this.searchuser, 20)
      },
      newselectlession() {
        this.use = 0
        this.getuserinfo(1, '', 20)
        // this.getcourseinfo(1, '', 20)
        this.ruleForm.course = this.course.id + '/' + this.course.name + '/' + this.course.subject.name + '/' + this.course.teacher.name
        this.dialogFormVisible = true
      },
      submitForm(formName) {
        console.log(this.ruleForm)
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.ruleForm.course_id = parseInt(this.course.id)
            console.log(this.ruleForm)
            if (this.use === 0) {
              this.ruleForm.user_id = parseInt(this.ruleForm.user)
              postselectleeion(this.ruleForm).then(response => {
                const data = response.data
                console.log(data)
                this.dialogFormVisible = false
                this.$message({
                  message: '新增选课成功！',
                  type: 'success'
                })
                this.getselectleeioninfo(this.current_page, '', this.page_size, '', this.course.id)
              }).catch(error => {
                console.log(error)
              })
            }
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm(formName) {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
        this.dialogFormVisible = false
        this.clearFormdata()
      },
      currentChange(val) {
        this.current_page = val
        // console.log(this.current_page)
        this.getselectleeioninfo(this.current_page, this.searchselectlession, this.page_size, this.search_type, this.course.id)
      },
      sizeChange(val) {
        console.log(val)
        var page_count = this.total / val
        var max_pae = Math.ceil(page_count)
        this.page_size = val
        if (this.current_page <= max_pae) {
          this.getselectleeioninfo(this.current_page, this.searchselectlession, this.page_size, this.search_type, this.course.id)
        } else {
          this.getselectleeioninfo(this.current_page, this.searchselectlession, this.page_size, this.search_type, this.course.id)
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
        console.log(this.multipleSelection)
      },
      add_group_num() {
        var form_list = []
        for (var i in this.multipleSelection) {
          form_list.push(this.multipleSelection[i].id)
        }
        console.log(form_list)
        this.patchcourseusergroupinfo(form_list,this.group_radio)
      }
    },
    created: function() {
      this.course = this.$route.params.course
      this.father_page_num = this.$route.params.page
      this.getselectleeioninfo(this.current_page, '', this.page_size, '', this.course.id)
    }
}
</script>

<style scoped>
.group_div{
  width: 100%;
}
.group_item{
  /* width: 100%;
  display: block; */
  margin: 0 0 0 10px; 
}
</style>
